<template>
    <div>
        <ul>
            <router-link
                tag="li"
                :to="`/details/${item.comic_id}`"
                v-for="(item, index) in rankinglist"
                :key="item.comic_id"
            >
                <div class="left">
                    <van-image
                        width="27.2vw"
                        height="36.2vw"
                        lazy-load
                        fit="cover"
                        :src="`${item.vertical_cover}@100w.jpg`"
                    />
                </div>
                <div class="right">
                    <h2>{{ item.title }}</h2>
                    <div class="bottom">
                        <h3>{{ item.author[0] }} {{ item.author[1] }}</h3>
                        <p v-if="item.styles.length > 0">{{ item.styles[0].name }}</p>
                        <p>更新至{{ item.last_short_title }}话</p>
                    </div>
                    <i v-if="item.last_rank == index + 1" class="iconfont icon-dengyu"></i>
                    <i v-else-if="item.last_rank > index + 1" class="iconfont icon-arrdown"></i>
                    <i v-else class="iconfont icon-jtup-copy"></i>
                </div>
                <span
                    class="num"
                    :style="[
                        { fontSize: index < 3 ? '80px' : '' },
                        { top: index < 3 ? '-30px' : '-8px' },
                        { transform: index == 0 ? 'rotate(5deg)' : '' },
                    ]"
                    >{{ index + 1 > 3 && index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</span
                >
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        rankinglist: {
            type: Array,
            define: () => {
                return [];
            },
        },
    },
};
</script>

<style lang="scss" scoped>
ul {
    li {
        display: flex;
        margin-bottom: 20px;
        padding: 0px 20px 0px 44px;
        position: relative;
        .num {
            position: absolute;
            top: 0;
            left: 10px;
            color: #cf9870;
            font-size: 30px;
            font-weight: bold;
            z-index: -1;
        }
        .left {
            & img {
                width: 102px;
            }
        }
        .right {
            flex: 1;
            padding-left: 8px;
            position: relative;
            h2 {
                font-size: 18px;
                color: #1c1d1f;
                margin-right: 6px;
                padding-right: 18px;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .bottom {
                position: absolute;
                bottom: -4px;
                color: #90959b;
                font-size: 12px;
                h3 {
                    width: 80%;
                    line-height: 24px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                p {
                    line-height: 24px;
                }
            }
            i {
                position: absolute;
                top: 5px;
                right: 0;
                font-size: 12px;
            }
        }
    }
}
</style>
